<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>DBtoDoc-控制台</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <script src="/layui/layui.js"></script>
</head>
<body style="width: 90vw;min-width: 1000px;margin: 15px auto;">
<div class="layui-row layui-anim layui-anim-upbit">
  <!--导航-->
  <div th:replace="~{layout/layout_nav :: navigation}">
  </div>

  <!--数据库选择-->
  <form class="layui-form layui-row">
    <div style="width:270px;float: left;">
      <label class="layui-form-label">选择数据库</label>
      <div class="layui-input-block">
        <select name="driverClassName" lay-verify="required">
          <option th:value="${session.connect!=null?session.connect.driverClassName:''}">请选择</option>
          <option value="com.mysql.cj.jdbc.Driver">MySQL</option>
        </select>
      </div>
    </div>
    <div style="width: 500px;float: left;">
      <label class="layui-form-label">JDBC-URL</label>
      <div class="layui-input-block">
        <input type="text" name="url" required lay-verify="required"
               th:value="${session.connect!=null?session.connect.url:''}"
               placeholder="请输入JDBC-URL、带上参数" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div style="width: 250px;float: left;margin-left: -60px">
      <label class="layui-form-label">账号</label>
      <div class="layui-input-block">
        <input type="text" name="username" required lay-verify="required"
               th:value="${session.connect!=null?session.connect.username:''}"
               placeholder="请输入数据库账号" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div style="width: 250px;float: left;margin-left: -60px">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="text" name="password" required lay-verify="required"
               th:value="${session.connect!=null?session.connect.password:''}"
               placeholder="请输入数据库密码" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div style="width: 145px;float: left;margin-left: 15px;">
      <button id="connectBtn" class="layui-btn" lay-submit lay-filter="formConnect"><i class="layui-icon">&#xe608;</i>连接数据库</button>
    </div>
  </form>
  <div class="layui-row layui-anim layui-anim-upbit" style="margin: 10px;">
    <button class="layui-btn layui-btn-normal" id="example"><i class="layui-icon">&#xe607;</i>连接属性example</button>
    <button class="layui-btn" id="reload"><i class="layui-icon">&#xe669;</i>加载数据/reload</button>
    <button class="layui-btn layui-btn-normal" id="exportPDF"><i class="layui-icon">&#xe601;</i>导出PDF</button>
  </div>
  <div class="layui-row">
    <table id="db" lay-filter="test"></table>
  </div>
</div>

<script>
  var table, $, hasLoad = false, layer, tableData = [];
  layui.use(['form', 'jquery', 'element', 'table'], function () {
    var form = layui.form;
    $ = layui.jquery;
    var element = layui.element;
    table = layui.table;
    layer = layui.layer;

    form.on('submit(formConnect)', function (data) {
      $.ajax({
        data: JSON.stringify(data.field),
        contentType: 'application/json;charset=UTF-8',
        url: '/main/conncet',
        type: 'post',
        success: function (data) {
          if (data.code == 0) {
            layer.msg(data.msg)
            initLoadTable()
            hasLoad = true
          } else {
            layer.open({
              title: '连接失败！'
              , area: ['800px', '600px']
              , content: data.msg
            });
          }
        }
      })
      return false;
    });

    $('#example').click(function () {
      layer.open({
        title: '连接属性example'
        , area: ['800px', '300px']
        , content: 'MySQL:<br>' +
            'jdbc:mysql://localhost:3306/' + '<b style="color: red">your-databaseName</b>'
            + '?useUnicode=true&nullCatalogMeansCurrent=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai'
            +
            ''
      });
    })

    $('#reload').click(function () {
      if (hasLoad) {
        table.reload('tableId');
      } else {
        layer.msg('请先链接数据库')
      }
    })

    //导出pdf
    $('#exportPDF').click(function () {
      //询问框
      layer.confirm('请选择导出PDF类型', {
        btn: ['表详情', '表概要', '取 消'] //按钮
      }, function () {
        window.open('/main/exportPDF?type=detail')
      }, function () {
        window.open('/main/exportPDF?type=probably')
      }, function open() {
        console.log('取消导出')
      });
    })

  });

  function initLoadTable() {
    table.render({
      elem: '#db'
      , id: 'tableId'
      , limit: 999
      , url: '/main/dataBaseSchema' //数据接口
      , parseData: function (res) { //res 即为原始返回的数据
        tableData = res
        return res;
      }
      , cols: [
        [ //表头
          {field: 'dataBaseName', title: '数据库名', width: 110, sort: true, fixed: 'left'}
          , {field: 'tableName', title: '表名', width: 200, sort: true}
          , {field: 'engine', title: '引擎', width: 120, sort: true}
          , {field: 'version', title: '表版本', width: 100, sort: true}
          , {field: 'rows', title: '总行', width: 120, sort: true}
          , {
          field: 'avgRowSize', title: '单行大小', width: 110, sort: true,
          templet: function (res) {
            return window.parseInt(res.avgRowSize / 1024) + 'kb'
          }
        }
          , {
          field: 'size', title: '总大小', width: 100, sort: true,
          templet: function (res) {
            return window.parseInt(res.size / 1024) + 'kb'
          }
        }
          , {field: 'autoIncrement', title: '自增id', width: 100, sort: true}
          , {field: 'createTime', title: '创建时间', width: 170, sort: true}
          , {field: 'tableCollation', title: '排序规则', width: 150, sort: true}
          , {field: 'tableComment', title: '表注释', width: 200, sort: true}
          , {
          fixed: 'right', title: '操作', templet: function (res) {
            return '<button onclick="see(\'' + res.tableName
                + '\')" type="button" class="layui-btn layui-btn-primary layui-btn-sm">表详情</button>'
                + '<button onclick="updateDescription(\'' + res.tableName
                + '\')" type="button" class="layui-btn layui-btn-normal layui-btn-sm">修改注释</button>'
          }
        }
        ]
      ]
    });
  }

  function see(tableName) {
    layer.open({
      title: tableName + ' 表',
      type: 2,
      area: ['1100px', '700px'],
      content: '/main/tableDetails?tableName=' + tableName
    });
  }

  //修改表注释
  function updateDescription(tableName) {
    var val = {}
    for (var i = 0; i < tableData.data.length; i++) {
      if (tableData.data[i].tableName === tableName) {
        val = tableData.data[i]
        break
      }
    }
    layer.prompt({
      title: '修改表注释',
      formType: 2
      , value: val.tableComment
    }, function (value, index) {
      $.ajax({
        data: {"table": tableName, "comment": value},
        url: '/main/updateTableComment',
        type: 'post',
        sync: false,
        success: function (data) {
          if (data.code == 0) {
            table.reload('tableId');
            window.setTimeout(function () {
              layer.msg(data.msg)
            }, 600)
            layer.close(index);
          } else {
            alert(data.msg)
          }
        }
      })
    });
  }

  if ([[${session.connect!=null?'true':'false'}]]) {
    window.setTimeout(function () {
      $('#connectBtn').click()
    }, 300)
  }
</script>

</body>
</html>
